<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Family账本 - ${username }</title>
    <meta name="description" content="这是一个 index 页面">
    <meta name="keywords" content="index">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <meta name="apple-mobile-web-app-title" content="Amaze UI" />
    
    <link rel="shortcut icon" href="${path }/static/img/账本logo.png">
	<link href="${path }/static/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
	<!-- <link href="${path }/static/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet"> -->
	<link href="${path }/static/css/font-awesome.min.css" rel="stylesheet">
	<link href="${path }/static/css/font-awesome.css" rel="stylesheet">
	<link href="${path }/static/css/animate.min.css" rel="stylesheet">
	<link href="${path }/static/css/style.min862f.css?v=4.1.0" rel="stylesheet">
    <link href="${path }/static/css/plugins/toastr/toastr.min.css" rel="stylesheet">
    
    <link rel="stylesheet" href="${path }/static/css/amazeui.min.css" />
    <link rel="stylesheet" href="${path }/static/css/amazeui.datatables.min.css" />
    <link rel="stylesheet" href="${path }/static/css/app.css">
    <script src="${path }/static/js/echarts.js"></script>
    <script src="${path }/static/js/jquery.min.js"></script>
    <script src="${path }/static/js/amazeui.min.js"></script>
</head>

<body data-type="chart" style="background-color: #f3f3f4;" >
	<!--<script src="js/theme.js" ></script>-->
	<div class="row">
		<div class="col-sm-3"></div>
		<div class="col-sm-6" style="position: absolute;top:50%;left: 50%;margin-left:-600px;margin-top:-450px;">
			
			<div class="am-g tpl-g">
	    	<!-- 风格切换 -->
	        <div class="tpl-skiner">
	            <div class="tpl-skiner-toggle am-icon-cog">
	            </div>
	            <div class="tpl-skiner-content">
	                <div class="tpl-skiner-content-title">
	                    		菜单
	                </div>
	                <div class="tpl-skiner-content-bar">
	                    <a href="${path }/ToIndex"><span style="color: white;">主页面</span></a>
	                    <!-- <span class="skiner-color skiner-black" data-color="theme-black"></span> -->
	                </div>
	            </div>
	        </div>
	        
	        <!-- 内容区域 -->
	        <div style="width: 1200px; margin: auto; background: #f3f3f4;">
	
	            <div class="container-fluid am-cf" style="width: 1160px; background: #fff;">
	                <div class="row">
	                    <div class="am-u-sm-12 am-u-md-12 am-u-lg-9">
	                        <div class="page-header-heading" align="center" style="margin-left: 250px;"> <h1>收支图表</h1> </div>
	                   
	                    </div>
	                    <div class="am-u-lg-3 tpl-index-settings-button">
	                        
	                    </div>
	                </div>
	
	            </div>
				<!--表格DIV区域 -->
				
	            <div class="row-content am-cf" >
	            	<!--选取日期select框-->
	         		<div class="widget am-selected" style="background: #fff;">
	         			<br />
						<form action="${path }/DoCharts" method="get">
							<!--年-->
								<select name = "year" data-am-selected style ="">
									<option value="2019" <c:if test="${year == '2019' }">selected</c:if> >2019年</option>
									<option value="2018" <c:if test="${year == '2018' }">selected</c:if> >2018年</option>
									<option value="2017" <c:if test="${year == '2017' }">selected</c:if> >2017年</option>
									<option value="2016" <c:if test="${year == '2016' }">selected</c:if> >2016年</option>
									<option value="2015" <c:if test="${year == '2015' }">selected</c:if> >2015年</option>
									<option value="2014" <c:if test="${year == '2014' }">selected</c:if> >2014年</option>
								</select>
							<!--月-->
								<select name = "month" data-am-selected>
									<option value="00" <c:if test="${month == '00' }">selected</c:if> > - </option>
									<option value="01" <c:if test="${month == '01' }">selected</c:if> >1月</option>
									<option value="02" <c:if test="${month == '02' }">selected</c:if> >2月</option>
									<option value="03" <c:if test="${month == '03' }">selected</c:if> >3月</option>
									<option value="04" <c:if test="${month == '04' }">selected</c:if> >4月</option>
									<option value="05" <c:if test="${month == '05' }">selected</c:if> >5月</option>
									<option value="06" <c:if test="${month == '06' }">selected</c:if> >6月</option>
									<option value="07" <c:if test="${month == '07' }">selected</c:if> >7月</option>
									<option value="08" <c:if test="${month == '08' }">selected</c:if> >8月</option>
									<option value="09" <c:if test="${month == '09' }">selected</c:if> >9月</option>
									<option value="10" <c:if test="${month == '10' }">selected</c:if> >10月</option>
									<option value="11" <c:if test="${month == '11' }">selected</c:if> >11月</option>
									<option value="12" <c:if test="${month == '12' }">selected</c:if> >12月</option>
								</select>
								<button style="" type="submit" class="btn btn-sm btn-primary">转 到</button>
						</form>
	         		</div> 
	         
	            	<!--折线图-->
	            	<div class="widget am-cf" style="background: #fff;">
	                    <div class="widget-head am-cf" style="border-bottom: 1px solid gray;">
	                        <div class="widget-title am-fl"> <h1>折线图</h1> </div>
	                    </div>
	                    <div class="widget-body am-fr">
	                        <div style="height: 500px;"  id="zhexiantu">
								<!--放置Echarts-->
								<script type="text/javascript">
									var myChart = echarts.init(document.getElementById('zhexiantu'));
									option = {
			    title : {
			    	//表头
			        text: ''
			    },
			    tooltip : {
			        trigger: 'axis'
			    },
			    legend: {
			        data:['支出','收入']
			    },
			    toolbox: {
			        show : true,
			        feature : {
			            dataView : {show: true, readOnly: false},
			            magicType : {show: true, type: ['line', 'bar']},
			            restore : {show: true},
			            saveAsImage : {show: true}
			        }
			    },
			    calculable : true,
			    xAxis : [
			        {
			        	type : 'category',
			            data : ${date},
			            axisLabel: {  
			            	interval:0,
			            	<c:if test="${month != '00'}"> rotate:-30,</c:if>
			            }  
			        }
			    ],
			    yAxis : [
			        {
			            type : 'value'
			        }
			    ],
			    series : [
			        {
			            name:'支出',
			            type:'bar',
			            data: ${dataOut},
			            markPoint : {
			                data : [
			                    {type : 'max', name: '最大值'},
			                    {type : 'min', name: '最小值'}
			                ]
			            },
			        },
			        {
			            name:'收入',
			            type:'bar',
			            data: ${dataIn},
			            markPoint : {
			                data : [
			                    {type : 'max', name: '最大值'},
			                    {type : 'min', name: '最小值'}
			                ]
			            },
			        }
			    ]
			};
						myChart.setOption(option);
									
								</script>
	                        </div>
	                    </div>
	                </div>
	            	<!--饼图-->
					<div class="widget am-cf" style="background: #fff;">
					                    <div class="widget-head am-cf" style="border-bottom: 1px solid gray;">
					                        <div class="widget-title am-fl"> <h1>饼图</h1> </div>
					                    </div>
					                    <div class="widget-body am-fr">
					                        <div style="height: 700px;"  id="tongjitu">
												<!--放置Echarts-->
												<script type="text/javascript">
					
						var myChart = echarts.init(document.getElementById('tongjitu'));
					option = {
					    tooltip: {
					        trigger: 'item',
					        formatter: "{a} <br/>{b}: {c} ({d}%)"
					    },
					    legend: {
					        orient: 'vertical',
					        x: 'left',
					        data:['收入','支出','红包','投资','工资','兼职','其他','吃喝','学习','交通','娱乐','购物','化妆护肤','电子产品','医疗']
					    },
					    series: [
					        {
					            name:'类型',
					            type:'pie',
					            selectedMode: 'single',
					            radius: [0, '40%'],
					
					            label: {
					                normal: {
					                    position: 'inner'
					                }
					            },
					            labelLine: {
					                normal: {
					                    show: false
					                }
					            },
					            data:[
					                {value:${in}, name:'收入', selected:true},
					                {value:${out}, name:'支出'}
					            ]
					        },
					        {
					            name:'标签',
					            type:'pie',
					            radius: ['55%', '75%'],
					
					            data: ${label}
					        }
					    ]
					};
								myChart.setOption(option);
												</script>
	                        </div>
	                    </div>
	                </div>
	            </div>
	            
	           </div>
	           	           
	        </div>
			
		</div>
		<div class="col-sm-3"></div>
	</div>

    <script src="${path }/static/js/amazeui.datatables.min.js"></script>
    <!-- <script src="${path }/static/js/dataTables.responsive.min.js"></script> -->
    <script src="${path }/static/js/app.js"></script>
</body>

</html>

